<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" width="740px" :title="`${dialogProps.title}规则`">
    <el-form
      ref="ruleFormRef"
      label-width="110px"
      label-suffix=" :"
      :rules="rules"
      :disabled="dialogProps.isView"
      :model="dialogProps.row"
      :hide-required-asterisk="dialogProps.isView"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="充值类型" prop="depositType">
            <el-radio-group v-model="dialogProps.row!.depositType">
              <el-radio :label="1">充值</el-radio>
              <el-radio :label="2">充次数</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="dialogProps.row.depositType === 1">
            <el-form-item label="充值金额" prop="depositMoney">
              <el-input-number class="w100" :min="1" v-model="dialogProps.row!.depositMoney" :controls="false" />
            </el-form-item>
            <el-form-item label="赠送金额" prop="giveMoney">
              <el-input-number class="w100" v-model="dialogProps.row!.giveMoney" :controls="false" />
            </el-form-item>
          </template>
          <template v-if="dialogProps.row.depositType === 2">
            <el-form-item label="充值次数" prop="parValue">
              <el-input-number class="w100" v-model="dialogProps.row!.parValue" :controls="false" />
            </el-form-item>
            <el-form-item label="赠送次数" prop="parValue">
              <el-input-number class="w100" v-model="dialogProps.row!.parValue" :controls="false" />
            </el-form-item>
          </template>
          <el-form-item label="赠送积分" prop="giveIntegral">
            <el-input-number class="w100" v-model="dialogProps.row!.giveIntegral" :controls="false" />
          </el-form-item>
          <el-form-item label="上级赠送积分" prop="upGiveIntegral">
            <el-input-number class="w100" v-model="dialogProps.row!.upGiveIntegral" :controls="false" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dialogProps.row!.remark" placeholder="请填写"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会员分类" prop="userCategoryId">
            <el-select class="w100" v-model="dialogProps.row!.userCategoryId" placeholder="请选择" clearable>
              <el-option v-for="item in optionsCategory" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="depositRuleStatus">
            <el-radio-group v-model="dialogProps.row!.depositRuleStatus">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="2">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否累加" prop="isAccumulation">
            <el-radio-group v-model="dialogProps.row!.isAccumulation">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="赠送礼券" prop="couponId">
            <el-select class="w100" v-model="dialogProps.row!.couponId" placeholder="请选择" clearable>
              <el-option v-for="item in optionsCoupon" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <!-- <el-input v-model="dialogProps.row!.couponId" disabled>
              <template #prepend>
                <el-button type="primary" :icon="MoreFilled" @click="addGift"></el-button>
              </template>
            </el-input> -->
          </el-form-item>
          <el-form-item label="礼券数量" prop="couponCount">
            <el-input-number class="w100" v-model="dialogProps.row!.couponCount" :controls="false" />
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker v-model="dialogProps.row!.startTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="dialogProps.row!.endTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="ml40">
      <div>
        <el-text type="info" size="small">
          提示1:充值金额和赠送金额都为0时,前台可输入赠送金额；赠送次数为-1,前台可输入赠送次数
        </el-text>
      </div>
      <div class="mt10">
        <el-text type="info" size="small">
          提示2:充值金额和赠送金额都为0时,赠送积分为每元赠送多少积分，次卡的积分赠送在次卡方案设置
        </el-text>
      </div>
      <div class="mt10">
        <el-text type="info" size="small">提示3:不选择会员分类时,所有会员都适用该规则</el-text>
      </div>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button v-show="!dialogProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="RechargeRulesDialog">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { Member } from "@/api/interface";
import { getUserCategoryList } from "@/api/modules/member";
// import { MoreFilled } from "@element-plus/icons-vue";
import { getFoodCouponList } from "@/api/modules/coupon";

const rules = reactive({
  name: [{ required: true, message: "会员名称必填" }],
  depositMoney: [{ required: true, message: "请输入充值金额" }],
  couponCount: [
    {
      validator: (rules: any, value: any, callBack: any) => {
        if (dialogProps.value.row.couponId && !value) {
          return callBack(new Error("请输入礼券数量"));
        }
        callBack();
      }
    }
  ]
});

interface DialogProps {
  title: string;
  isView: boolean;
  row: any;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const optionsCategory = ref<any[]>([]);
const optionsCoupon = ref<any[]>([]);
const dialogVisible = ref(false);
const dialogProps = ref<DialogProps>({
  isView: false,
  title: "",
  row: {
    // depositMoney: 1,
    // couponCount: 1
  }
});

// const addGift = () => {
//   console.log("addGift");
// };

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps) => {
  dialogProps.value = params;
  dialogVisible.value = true;
  getUserCategoryList({ pageSize: 9999, pageNum: 1 }).then(res => {
    optionsCategory.value = res.data.list;
  });
  getFoodCouponList({ pageSize: 9999, pageNum: 1 }).then(res => {
    optionsCoupon.value = res.data.list;
  });
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await dialogProps.value.api!(dialogProps.value.row);
      ElMessage.success({ message: `${dialogProps.value.title}规则成功！` });
      dialogProps.value.getTableList!();
      dialogVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>
